<template>
	<view>
		<u-toast ref="uToast" />
		<view class="navStyle">
			<u-navbar :is-back="false" z-index=999 title="" :background="background">
				<view class="slot-wrap" @tap="goBack">
					<u-icon name="close" margin-left="30rpx" label="资料设置" label-size="50" color="#000000" size="40"></u-icon>
				</view>
				<!-- 设置监听输入框输入数字的时候变绿否则禁用 -->
				<text style="margin-left: 320rpx;font-size:50rpx;color: #909399;" @tap="save">保存</text>
			</u-navbar>
		</view>
		<view class="content">
			<!-- 只能有一个根元素 -->
			<view class="sticky">
				<image class="imageStyle" :src="imageUrl" @click="show = true"></image>
			</view>
			<u-popup style="z-index: 999;" v-model="show" mode="bottom" height="500rpx" closeable close-icon-size="60">
				<view>
					<u-toast ref="uToast" />
					<u-upload class="uploadStyle" ref="uUpload" 
					:max-size="2 * 1024 * 1024" 
					:max-count="1" name="file" 
					:action="action"
					 :file-list="fileList" 
					 :auto-upload="false" 
					 :limitType="['png', 'jpg']" 
					 :formData="formData" 
					 @on-success="onSuccess"
					 on-error="onError" 
					 @on-oversize="handleExceed" 
					 @on-change="onChange">
					</u-upload>

					<u-button type="success" class="buttonStyle" @tap="submit">上传</u-button>
				</view>
			</u-popup>
			<u-form :model="personlist" ref="uForm">
				<view class="textStyle">
					<text>账号信息</text>
				</view>
				<u-form-item label="昵称" label-width="150rpx" prop="personlist.userName" required>
					<u-input v-model="personlist.userName" style="margin-left: 100rpx;" placeholder="请输入姓名" />
				</u-form-item>
				<view class="textStyle">
					<text>个人信息</text>
				</view>

				<u-form-item label="身份类型" label-width="150rpx" prop="personlist.userIdentity">
					<picker @change="bindIdentityChange" :value="identity" :range="identitys" style="width: 500rpx;">
						<view class="u-line-1 typeStyle">{{identitys[identity]}}</view>
					</picker>
					<u-icon name="arrow-right" class="iconStyle"></u-icon>
				</u-form-item>
				<u-form-item label="学校" label-width="150rpx" prop="personlist.schoolName" required>
					<u-input v-model="personlist.schoolName" style="margin-left: 100rpx;" placeholder="请输入您的学校" />
				</u-form-item>
				<u-form-item label="兴趣" label-width="150rpx" required prop="personlist.userInterest">
					<u-input v-model="personlist.userInterest" style="margin-left: 100rpx;" placeholder="请输入兴趣爱好" />
				</u-form-item>
				<u-form-item label="学号" label-width="150rpx" required prop="personlist.userNumber">
					<u-input v-model="personlist.userNumber" style="margin-left: 100rpx;" placeholder="请输入您的学号" />
				</u-form-item>
				<u-form-item label="真实姓名" label-width="150rpx" required prop="personlist.realName">
					<u-input v-model="personlist.realName" style="margin-left: 100rpx;" placeholder="请输入您的姓名" />
				</u-form-item>
				<u-form-item label="性别" label-width="150rpx" prop="personlist.userSex">
					<u-radio-group v-model="personlist.userSex">
						<u-radio style="margin-left: 100rpx;" v-for="(item, index) in sexList" :key="index" :name="item.name" :disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="最高学历" label-width="150rpx" prop="personlist.userEducation">
					<picker @change="bindEducationChange" :value="education" :range="educations" style="width: 500rpx;">
						<view class="u-line-1 typeStyle">{{educations[education]}}</view>
					</picker>
					<u-icon name="arrow-right" class="iconStyle"></u-icon>
				</u-form-item>
				<view class="textStyle">
					<text>个性签名</text>
				</view>
				<u-form-item>
					<u-input v-model="personlist.userSignature" placeholder="请输入个性签名,不能超过30个字" maxlength="30" />
				</u-form-item>
			</u-form>
		</view>

	</view>
</template>

<script>
	// 指定
	import {
		saveUserInfo,
		getUniAppLoginInfo
	} from "@/api/modules/personal.js";

	export default {
		data() {
			return {
				url: this.GOBAL.baseURL,
				background: {
					backgroundColor: '#ffffff',
					//backgroundImage: 'linear-gradient(45deg,#c2e9fb,#a1c4fd)'
				},
				userInfo: {},
				imageUrl: '',
				personlist: {
					userName: '', //昵称 ，必
					userIdentity: '其他', //身份，选
					schoolName: '', //学校名字 必
					userNumber: '', //学号 必
					realName: '', //真实姓名 必
					userSex: '', //性别，选
					userInterest: '', //兴趣，必
					userEducation: '', //教育经历，选
					userImage: '', //头像 选
					userSignature: '......', //个性签名，选
					userEmail: ''
				},
				show: false,
				action: this.GOBAL.actionURL + 'uploadHeadApp',
				fileList: [],
				userImage:'',
				formData: {
					userEmail: ''
				},
				sexList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				identitys: ['学生', '在职', '其他'],
				identity: 0,
				educations: ['小学', '初中', '高中', '专科', '本科', '硕士', '博士', '其他'],
				education: 0,
			}
		},
		methods: {
			bindIdentityChange: function(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)
				this.identity = e.target.value;
				this.personlist.userIdentity = this.identitys[e.target.value]
			},
			bindEducationChange: function(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)
				this.education = e.target.value;
				this.personlist.userEducation = this.educations[e.target.value]
			},
			save() {
				if (this.personlist.userName != "" && this.personlist.userName != null) {
					if (this.personlist.schoolName != "" && this.personlist.schoolName != null) {
						if (this.personlist.userInterest != "" && this.personlist.userInterest != null) {
							if (this.personlist.userNumber != "" && this.personlist.userNumber != null) {
								if (this.personlist.realName != "" && this.personlist.realName != null) {
									saveUserInfo({
											...this.personlist
										})
										.then(resp => {
											uni.setStorageSync("userName", this.personlist.userName);
											this.toast(resp.message, 1)
											setTimeout(function() {
												location.reload();
											}, 1000);
										})
										.catch(resp => {
											this.toast(resp.message, 2)
										})
								} else
									this.toast('请输入您的姓名', 3)
							} else
								this.toast('请输入学号', 3)
						} else
							this.toast('请输入兴趣爱好', 3)
					} else
						this.toast('请输入学校', 3)
				} else
					this.toast('请输入昵称', 3)
				/* 
				if(this.personlist.userNumber==""||this.personlist.userNumber==null){
					this.toast('请输入学号',3)
				}
				if(this.personlist.realName == ""||this.personlist.realName ==null){
					this.toast('请输入您的姓名',3)
				} */
				/* saveUserInfo({
						...this.personlist
					})
					.then(resp => {
						this.toast(resp.message,1)
						setTimeout(function () {
						           location.reload();
						        }, 1000);
					})
					.catch(resp => {
						this.toast(resp.message, 2)
					}) */
			},
			//返回账号页
			goBack() {
				uni.switchTab({
				    url: '/pages/account/account',
					success(){
						// uni.setStorage({
						// 	key: 'userImage',
						// 	data: this.userImage
						// })
						// location.reload()
					}
				});
			},
			//头像上传方法
			submit() {
				if (this.fileList == "" || this.fileList == null) {
					this.$refs.uToast.show({
						title: '请选择一张图片上传',
						type: 'error',
					})
				}
				this.$refs.uUpload.upload();
			},
			cancel() {
				uni.navigateBack(1)
			},
			onSuccess(resp, index, lists, name) {
				this.$refs.uToast.show({
					title: '上传成功',
					type: 'success',
					duration:1000
				})
				
				setTimeout(function () {
					this.show = false,
					this.fileList = [],
				           location.reload(),
						   uni.navigateTo({
						   	url: 'account/personal'
						   })
				        }, 1000);
			},
			onError(resp, index, lists, name) {
				this.$refs.uToast.show({
					title: '上传失败',
					type: 'error',
				})
			},
			handleExceed(file, lists, name) {
				this.$refs.uToast.show({
					title: '图片大小不能超过2M',
					type: 'error',
				})
			},
			onChange(res, index, lists, name) {
				this.fileList = lists
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数

		},
		mounted() {
			//获取个人信息
			//console.log('开始了')
			this.userEmail = uni.getStorageSync('userEmail')
			let data = {
				userEmail: uni.getStorageSync('userEmail')
			}
			
			//console.log(data.userEmail)
			let that = this
			that.formData.userEmail = uni.getStorageSync('userEmail')
			getUniAppLoginInfo(data.userEmail)
				.then(resp => {

					// console.log(resp)
					that.personlist = resp.data;
					this.userImage = resp.data.userImage;
					uni.setStorage({
						key: 'userImage',
						data: this.userImage
					})
					// console.log(this.userImage)
					that.imageUrl = that.url + "userImages/" + that.personlist.userImage;
					// console.log(that.imageUrl)
					that.personlist.userEmail = uni.getStorageSync('userEmail')
					if (that.personlist.userIdentity == '在职') {
						this.identity = 1
					} else if (that.personlist.userIdentity == '其他') {
						this.identity = 2
					} else {}


					let userEducation = that.personlist.userEducation
					//console.log(resp.data.userEducation)
					switch (userEducation) {
						case '初中':
							this.education = 1
							break; //可选
						case '高中':
							this.education = 2
							break; //可选
						case '专科':
							this.education = 3
							break; //可选
						case "本科":
							this.education = 4
							break; //可选
						case '硕士':
							this.education = 5
							break; //可选
						case '博士':
							this.education = 6
							break; //可选
						case '其他':
							this.education = 7
							break; //可选
						default: //可选
							//语句
					}

					// console.log('成功了')
				})
				.catch(resp => {
					//console.log('失败了')
				})
		}
	}
</script>

<style>
	.slot-wrap {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}

	.navStyle {
		display: block;
		background-color: #F29100;
		z-index: 999;
	}

	.content {
		margin-right: 37rpx;
		height: 1000rpx;
	}

	.sticky {
		padding-left: 30rpx;
		padding-right: 30rpx;
		width: 750rpx;
		height: 300rpx;
		background-color: #FFFFFF;
		font-size: 40rpx;
		line-height: 75rpx;
		color: #2c3e50;
		display: block;
		z-index: 999;
		border-width: 750rpx;
		border-bottom: 1px solid #dedede;
	}

	.imageStyle {
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
		margin-top: 75rpx;
		margin-left: 270rpx;
	}

	.textStyle {
		padding-top: 35rpx;
		padding-left: 80rpx;
		width: 750rpx;
		height: 90rpx;
		font-size: 35rpx;
		color: #909399;
		background-color: #F5F5F5;
	}

	.iconStyle {
		color: #909399;
		margin-left: -60rpx;
	}

	.u-form>.u-form-item {
		padding-left: 75rpx;
		font-size: 30rpx;
	}

	.typeStyle {
		margin-left: 100rpx;
	}

	.buttonStyle {
		width: 200rpx;
		height: 80rpx;
		margin-top: 40rpx;
		margin-left: 290rpx;
		border-radius: 30rpx;
		background-color: #19BE6B;
	}

	.uploadStyle {
		margin-left: 275rpx;
		margin-top: 30rpx;
	}
</style>
